<template>
	<view class="container" v-if='visibleSync' :style='{height: setting.windowHeight + "px", padding: setting.topMenuWithStatusBarHeight + "px 0px 0px 0px"}' @touchmove.stop.prevent>
		<view class='container-wrapper' :style="{height: setting.windowHeight - 2 * setting.topMenuWithStatusBarHeight + 'px'}">
			<view class='person-title'>请完善以下信息以便为您配餐</view>
			<scroll-view class='personinfo-box' :style="{height: setting.windowHeight - 2 * setting.topMenuWithStatusBarHeight -40 + 'px'}" :scroll-y="true" :scroll-x="false">
				<uni-forms ref="personForm" :modelValue="personData" label-position="top" :rules="validatorRules">
					<uni-section title="基础信息" type="line" class='section-block'>
						<!-- <template v-slot:right>
							<view class='expand-change'>
								<view><uni-icons type="right" size="12" color="setting.corg" v-if="!basicExpandFlag"></uni-icons></view>
								<view><uni-icons type="bottom" size="12" color="setting.corg" v-if="basicExpandFlag"></uni-icons></view>
							</view>
						</template> -->
						<view class="section-content" v-if='basicExpandFlag'>
							<!-- <uni-forms-item label="人员类型" required name="usertype">
								<uni-data-checkbox v-model="personData.usertype" :localdata="dictUserType"/>
							</uni-forms-item> -->
							<uni-forms-item label="昵称" required name="nickname">
								<uni-easyinput v-model="personData.nickname" placeholder="请输入昵称" type="text" maxlength="64"/>
							</uni-forms-item>
							<uni-forms-item label="身高" required name="height">
								<uni-easyinput v-model="personData.height" placeholder="请输入身高" type="number"/>
							</uni-forms-item>
							<uni-forms-item label="体重" required name="weight">
								<uni-easyinput v-model="personData.weight" placeholder="请输入体重" type="number"/>
							</uni-forms-item>
							<uni-forms-item label="生日" name="birthday">
								<uni-datetime-picker type="date" return-type="date" v-model="personData.birthday"/>
							</uni-forms-item>
							<uni-forms-item label="性别" name="sex">
								<uni-data-checkbox v-model="personData.sex" :localdata="dictSex"/>
							</uni-forms-item>
						</view>
					</uni-section>
					<uni-section title="身体状况" type="line" class='section-block' @click="checkStatusExpand">
						<template v-slot:right>
							<view class='expand-change'>
								<view><uni-icons type="right" size="12" color="setting.corg" v-if="!statusExpandFlag"></uni-icons></view>
								<view><uni-icons type="bottom" size="12" color="setting.corg" v-if="statusExpandFlag"></uni-icons></view>
							</view>
						</template>
						<view class="section-content" v-if='statusExpandFlag'>
							<uni-forms-item label="活动强度" name="intensity">
								<uni-data-checkbox v-model="personData.intensity" :localdata="dictIntensity" />
							</uni-forms-item>
							<uni-forms-item label="孕期" required v-if='personData.sex=="女"' name="pregnancy">
								<uni-data-checkbox v-model="personData.pregnancy" :localdata="dictPregnancy" />
							</uni-forms-item>
							<uni-forms-item label="哺乳期" required v-if='personData.sex=="女"' name="feeding">
								<uni-data-checkbox v-model="personData.feeding" :localdata="dictFeeding" />
							</uni-forms-item>
						</view>
					</uni-section>
					<uni-section title="饮食偏好" type="line" class='section-block' @click="checkFavouriteExpand">
						<template v-slot:right>
							<view class='expand-change'>
								<view><uni-icons type="right" size="12" color="setting.corg" v-if="!favouriteExpandFlag"></uni-icons></view>
								<view><uni-icons type="bottom" size="12" color="setting.corg" v-if="favouriteExpandFlag"></uni-icons></view>
							</view>
						</template>
						<view class="section-content" v-if='favouriteExpandFlag'>
							<uni-forms-item label="饮食目标" name="hobby">
								<uni-data-checkbox v-model="personData.hobby" :localdata="dictHobby"/>
							</uni-forms-item>
							<uni-forms-item label="忌口事项" name="taboo">
								<uni-data-checkbox v-model="personData.taboo" multiple :localdata="dictTaboo" />
							</uni-forms-item>
						</view>
					</uni-section>
				</uni-forms>
				<view style='height: 60px; clear:both'></view>
			</scroll-view>
			<view class='person-close-icon' @click="hide">
				<uni-icons type='close' size="28" color="#fff"></uni-icons>
			</view>
			<view class='btn-bar'>
				<button class='btn-save bgcor-b' @click="submit('personForm')">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import dateutil from '@/lib/dateutil.js';
	
	export default {
		components:{
			name:"personinfo", 
		},
		mounted(){
			console.log('mounted start');
			gui.init(this);
		},
		data() {
			return {
				basicExpandFlag: true,
				statusExpandFlag: false,
				favouriteExpandFlag: false,
				setting: {topMenuHeight:60},
				visibleSync: false,
				personData: {
					nickname: null,
					weight: null,
					height: null,
					birthday: null,
					sex: null,
					hobby: null,
					taboo: [],
					pregnancy: '',
					feeding: '',
					intensity: 'm',
					usertype: 'h'
				},
				/* dictUserType:[
					{text: '家庭成员(长期用餐)',value: 'h'}, {text: '客人(短期用餐)',value: 'g'}], */
				dictSex: [
					{text: '男',value: '男'}, {text: '女',value: '女'}],
				dictTaboo:[
					{text:'海鲜',value:'seafood'},{text:'辛辣',value:'spicy'},{text:'内脏',value:'viscus'},
					{text:'肉类',value:'meat'},{text:'蛋类',value:'egg'},{text:'香菜',value:'coriander'},
					{text:'酒类',value:'wine'},{text:'糖类',value:'suger'},{text:'冰品',value:'ice'}],
				dictPregnancy:[
					{text:'无',value:''},
					{text:'孕早期(<=12周)',value:'e'}, 
					{text:'孕中期(<=28周)',value:'m'}, 
					{text:'孕晚期(>28周)',value:'l'},
				],
				dictIntensity:[
					{text:'无',value:''},
					{text:'低强度',value:'l'}, 
					{text:'中等强度',value:'m'}, 
					{text:'高强度',value:'h'},
				],
				dictFeeding: [
					{text:'非哺乳期',value:''}, {text:'哺乳期',value:'feeding'}
				],
				dictHobby: [
					{text:'无',value:''}, 
					{text:'营养均衡',value:'balance'}, {text:'减脂',value:'minus'}, {text:'增肌',value:'plus'}
				],
				dictDisease: [
					{text:'无',value:''}, 
					{text:'高血压',value:'0'}, {text:'高血脂',value:'1'}, {text:'高血糖',value:'2'},
					{text:'低血糖',value:'3'}, {text:'贫血',value:'4'}, {text:'冠心病',value:'5'},
					{text:'甲亢',value:'6'}, {text:'甲减',value:'7'}, {text:'糖尿病',value:'8'},
					{text:'骨质疏松',value:'9'}, {text:'肝硬化',value:'10'}, {text:'脂肪肝',value:'11'},
					{text:'痛风',value:'12'}, {text:'脱发',value:'13'}
				],
				validatorRules: {
					nickname: {
						rules:[
							{
								required: true,
								errorMessage: '{label}不能为空',
							},
							{
								maxLength: 64,
								errorMessage: '{label}长度不能超过{maxLength}个字符',
							}
						],
						label:'昵称',
						validateTrigger:'submit'
					},
					height: {
						rules:[
							{
								required: true,
								errorMessage: '{label}不能为空',
							},
							{
								format: 'number',
								errorMessage: '{label}格式不正确',
							}
						],
						label:'身高',
						validateTrigger:'submit'
					},
					weight: {
						rules:[
							{
								required: true,
								errorMessage: '{label}不能为空',
							},
							{
								format: 'number',
								errorMessage: '{label}格式不正确',
							}
						],
						label:'体重',
						validateTrigger:'submit'
					},
					birthday: {
						rules:[
							{
								pattern: '^\d{4}-\d{2}-\d{2}',
								errorMessage: '{label}格式不正确',
							}
						],
						label:'生日',
						validateTrigger:'submit'
					}
				}
			}
		},
		onLoad() {},
		onReady() {},
		methods: {
			submit(ref) {
				var that = this;
				this.$refs[ref].validate().then(res => {
					that.hide();
				}).catch(err => {
					uni.showToast({
						title: '请完善信息！'
					})
				})
			},
			
			show(){
				this.visibleSync=true;
			},
			
			hide(){
				this.visibleSync=false;
			},
			
			checkBasicExpand(){
				this.basicExpandFlag=!this.basicExpandFlag;
			},
			
			checkStatusExpand(){
				this.statusExpandFlag=!this.statusExpandFlag;
			},
			
			checkFavouriteExpand(){
				this.favouriteExpandFlag=!this.favouriteExpandFlag;
			}
		}
	}
</script>

<style>
	.container{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100vh;
		z-index: 9999;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		top: 0px;
		left: 0px;
	}
	
	.container-wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 90%;
		background-color: #fff;
		position: relative;
	}
	
	.person-title{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		height: 50px;
		line-height: 50px;
	}
	
	.personinfo-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.section-block{
		border-radius: 10px;
	}
	
	.section-content {
		padding: 5px 15px;
		background-color: #fff;
	}
	
	.expand-change{
		font-size: 12px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 4px 10px;
	}

	.uni-forms-item__content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.uni-date-editor--x .uni-date__icon-clear {
	    padding: 0px 5px;
	    display: flex;
	    align-items: center;
	}
	
	.btn-bar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: absolute;
		bottom: -10px;
		left: 0px;
		background-color: #fff;
	}
	
	.btn-save{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 70%;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		color: #fff;
		font-size: 14px;
		margin: 10px 0px;
	}
	
	.person-close-icon{
		padding-top: 10px;
	}
</style>
